<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="羊场全称">
      <el-input v-model="form.farmFullName" placeholder="请输羊场名称" clearable />
    </el-form-item>
    <el-form-item label="负责人">
      <el-select v-model="form.farmPro" style="width: 200px;" placeholder="请选择负责人">
          <el-option label="郑健义" value="郑健义" />
          <el-option label="黄峭" value="黄峭" />
          <el-option label="黄慧贤" value="黄慧贤" />
          <el-option label="王丙鑫" value="王丙鑫" />
        </el-select>
    </el-form-item>
    <el-button type="danger" @click="getData()">
      查询
    </el-button>
    <el-button type="danger" @click="dialogFormVisible = true">
      新增猪场
    </el-button>
  </el-form>



  <el-table :data="tableData"  style="width: 100%">
    <!-- <el-table-column type="selection" width="55" /> -->
    <el-table-column prop="farmID" label="序号" align="center" />
    <el-table-column prop="farmNo" label="猪场编码" align="center" />
    <el-table-column prop="farmFullName" label="羊场全称" align="center" />
    <el-table-column prop="farmName" label="羊场简称" align="center" />
    <el-table-column prop="farmTime" label="创建日期" align="center" >
    <template #default="scope">
      {{scope.row.farmTime.substr(0,10).replace("T","")}}
    </template>


    </el-table-column>

    <el-table-column prop="farmPro" label="负责人" align="center" />
    <el-table-column prop="farmAdd" label="详细地址" align="center" />
    <el-table-column prop="farmDepartment" label="管理部门" align="center" />

    <el-table-column prop="farmStart" label="状态" align="center">
      <template #default="scope">
        <el-tag v-if="scope.row.farmStart === 1" type="primary">启用</el-tag>
        <el-tag v-if="scope.row.farmStart === 2" type="success">禁用</el-tag>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="" label="操作" align="center">

        <el-button type="primary" size="small" @click="handleEdit()">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDelete()">删除</el-button>

    </el-table-column> -->
  </el-table>

  <!-- 分页 -->
  <div>
    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[3, 5, 8, 10]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

  <!-- 新增角色弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="新增" width="500">
    <el-form :model="form" :rules="rules" ref="ruleFormRef">

      <el-form-item label="猪场全称" prop="farmFullName" :label-width="formLabelWidth">
        <el-input v-model="form.farmFullName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="猪场简称" prop="farmName" :label-width="formLabelWidth">
        <el-input v-model="form.farmName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="猪场规模" prop="farmBig" :label-width="formLabelWidth">
        <el-select v-model="form.farmBig" style="width: 200px;" placeholder="请选猪场规模">
          <el-option label="小规模" value="小规模" />
          <el-option label="中规模" value="中规模" />
          <el-option label="大规模" value="大规模" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="farmAdd" :label-width="formLabelWidth">
        <el-input v-model="form.farmAdd" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用" prop="farmStart" :label-width="formLabelWidth">
        <el-radio-group v-model="form.farmStart">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="负责人" prop="farmPro" :label-width="formLabelWidth">
        <el-input v-model="form.farmPro" />
      </el-form-item>

      <el-form-item label="创建日期" prop="farmTime" :label-width="formLabelWidth">
        <el-col :span="11">
        <el-form-item prop="farmTime">
          <el-date-picker
            v-model="form.farmTime"
            type="date"
            aria-label="Pick a date"
            placeholder="请选择日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
      <el-form-item label="管理部门" prop="farmDepartment" :label-width="formLabelWidth">
        <el-select v-model="form.farmDepartment" style="width: 200px;" placeholder="请选部门">
          <el-option label="郑健义" value="郑健义" />
          <el-option label="黄峭" value="黄峭" />
          <el-option label="黄慧贤" value="黄慧贤" />
          <el-option label="王丙鑫" value="王丙鑫" />
        </el-select>
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="danger" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();

const random = Math.floor(Math.random() * 1000);
const farmNo = year + '' + month + '' + day + '' + hour + '' + minute + '' + '' + random;

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  "farmNo" : farmNo,
  farmBig:'',
  farmFullName: '',
  farmName: '',
  farmTime: '',
  farmPro: '',
  farmAdd: '',
  farmDepartment: '',
  farmStart:'',
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,


});


//验证
const rules = reactive<FormRules>({
  farmFullName: [{ required: true, message: "猪场全称不能为空", trigger: "blur" }],
  farmName: [{ required: true, message: "猪场简称不能为空", trigger: "blur" }],
  farmBig: [{ required: true, message: "请选择猪场规模", trigger: "blur" }],
  farmAdd: [{ required: true, message: "详细地址不能为空", trigger: "blur" }],
  farmTime: [{ required: true, message: "日期不能为空", trigger: "blur" }],
  farmPro: [{ required: true, message: "请填入负责人", trigger: "blur" }],
});
const ruleFormRef = ref<FormInstance>();
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      axios
        .post(apiUrl+"/api/PigFarm/addPigFarmrooms", form)
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 0) {
            ElMessage.success('添加成功')
            router.push('/AddPigFarm')

          }
          else {
            ElMessage.error('添加失败')
          }

        });


    }
  });
};

const tableData = ref([]);
//显示
const getData = () => {
  axios
    .post(apiUrl+"/api/PigFarm/showFarm", {
      farmPro: form.farmPro,
      farmFullName: form.farmFullName,
      pageIndex: form.pageIndex,
      pageSize: form.pageSize
    })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data.list;
      form.pageCount = res.data.data.pageCount;
      form.totalCount = res.data.data.totalCount;
    });
};

//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  form.pageSize = val
  getData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  form.pageIndex = val
  getData();
}


//生命周期钩子
onMounted(() => {
  getData();

});
</script>

<style scoped></style>
